<template>
    <div class="ngs">
        <div class="noGoods" v-if='noGoods'>
            <p>购物车还没有商品</p>
            <p>快去逛逛吧</p>
        </div>
        <div class='postFee'>
            <h3>运费8元，满85元包邮</h3>
            <div>
                <i-icon type="editor" size="24" color="#666" />
                <span>编辑商品</span>
            </div>
        </div>
        <div class="lists">
            <div class="topLine">
                <div class="lefts">
                    <i-checkbox-group :current="current" @change="handleFruitChange">
                        <i-checkbox :position="position" :value="value2" i-class='checkBoxBg' color='#c75050'>
                        </i-checkbox>
                    </i-checkbox-group>
                </div>
                <div class="singleBook">
                    <ul>
                        <li>
                            <img src="../../../static/index/ym.jpg" alt="">
                            <div class="intruduce">
                                <h3>平视姚明</h3>
                                <p class="author">王猛</p>
                                <p class="ratings lastP">二手价
                                    <span class="currentPrice">¥4</span>
                                    <span class="discount">1.0折</span>
                                </p>
                            </div>
                        </li>
                    </ul>
                    <div class="btns_book">
                        <i-input-number :value="value3 " min="0" max="100" @change="handleChangeCount" />
                    </div>
                </div>
            </div>
        </div>
        <div class="cart-footer">
            <div class="left">
                <i-checkbox-group :current="current" @change="handleFruitChange">
                    <i-checkbox :position="position" :key="index" :value="value1" i-class='checkBoxBg' color='#c75050'>
                    </i-checkbox>
                </i-checkbox-group>
                <p>
                    <span>合计：</span><span>￥0</span>
                </p>
            </div>
            <div class="right">
                <p class="noGoodsIn">
                    去结算
                </p>
                <!-- <p>
                    去结算
                </p> -->
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            value1: '全选',
            value2: '',
            value3: '1',
            current: [],
            current: [],
            position: 'left',
            noGoods: false
        }
    },

    methods: {
        handleChangeCount(detail) {
            console.log(detail)
            this.value3 = detail.mp.detail.value
        },
        handleFruitChange(detail) {
            console.log(detail)
            const index = this.current.indexOf(detail.mp.detail.value)
            index === -1
                ? this.current.push(detail.mp.detail.value)
                : this.current.splice(index, 1)
        }
    }
}
</script>

<style lang='scss'  scoped>
.ngs {
    position: relative;
    height: 1200rpx;
    width: 100%;
}
.postFee {
    display: flex;
    justify-content: space-between;
    padding: 0 18rpx;
    height: 92rpx;
    line-height: 92rpx;

    h3 {
        font-size: 28rpx;
        color: #666;
        font-weight: bolder;
    }
    div {
        span {
            color: #666;
            font-size: 28rpx;
        }
    }
}
.noGoods {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 100rpx;
    transform: translate(-50%, -50%);
    p {
        font-size: 28rpx;
        text-align: center;
        color: #4f4f4f;
    }
}
.cart-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100rpx;
    border-top: 1px solid #ddd;
    padding: 0 18rpx;
    display: flex;
    justify-content: space-between;
    .left {
        display: flex;
        justify-content: space-between;
        p {
            height: 100rpx;
            line-height: 100rpx;

            span {
                color: #4f4f4f;
                font-size: 30rpx;
            }
        }
    }
    .right {
        p {
            width: 218rpx;
            height: 66rpx;
            background: #c78550;
            line-height: 66rpx;
            text-align: center;
            color: #fff;
            font-size: 28rpx;
            border-radius: 10px;
            margin-top: 17rpx;
            &.noGoodsIn {
                background: #fee8d6;
            }
        }
    }
}
.singleBook {
    margin-top: 30rpx;
    display: flex;
    justify-content: space-between;
    position: relative;
    ul {
        li {
            display: flex;
            justify-content: space-between;

            img {
                width: 88rpx;
                height: 124rpx;
                margin-right: 30rpx;
                margin-bottom: 10rpx;
            }
            .intruduce {
                margin-right: 90rpx;
                h3 {
                    color: #333;
                    font-size: 28rpx;
                    font-weight: 700;
                    line-height: 30rpx;
                    height: 30rpx;
                }
                .author {
                    color: #666666;
                    font-size: 24rpx;
                    margin-top: 20rpx;
                }
                .ratings {
                    color: #999;
                    font-size: 24rpx;

                    .originPrice {
                        display: inline-block;
                        width: 96rpx;
                        height: 36rpx;
                        text-align: center;
                        line-height: 36rpx;
                        background: #e5e5e5;
                        color: #a9a9a9;
                        font-weight: 700;
                        margin-top: 20rpx;
                        border-radius: 5px;
                    }
                    .currentPrice {
                        display: inline-block;
                        width: 96rpx;
                        height: 36rpx;
                        text-align: center;
                        line-height: 36rpx;
                        background: #c75050;
                        color: #fff;
                        font-weight: 700;
                        border-radius: 3px;
                        margin-right: 20rpx;
                        margin-left: 10rpx;
                    }
                    .discount {
                        color: #c78550;
                    }
                }
            }
        }
    }
    .btns_book {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }
}
.lists {
    padding: 0 18rpx;
    .topLine {
        border-top: 1px solid #ddd;
    }
    .lefts {
        float: left;
        margin-top: 30rpx;
    }
    .lastP {
        margin-top: 15rpx;
    }
}
</style>